<template>
  <div id="order">
    <navigationBar></navigationBar>
    <div class="container">
      <div class="section">
        <!-- 头部面包屑 -->
        <div class="crumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">购物车</el-breadcrumb-item>
            <el-breadcrumb-item>订单结算</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 从购物车跳转过来的已选中，需要结算的商品 -->
        <!-- 确认商品信息 -->
        <div class="selected">
          <div class="sel_top">
            <span>确认商品信息</span>
            <span style="margin-left:420px">单价</span>
            <span style="margin-left:220px">数量</span>
            <span style="margin-left:220px">金额</span>
          </div>
          <ul>
            <li v-for="(item,index) in shopcarlist" :key="index">
              <div class="goodsshow">
                <div class="img">
                  <img :src="item.imgurl" alt />
                </div>
                <div class="goodsdesc">
                  <p>{{item.goodsname}}</p>
                  <span style="margin-bottom:8px">型号:&nbsp;{{item.goodsmodel}}</span>
                  <span>颜色:&nbsp;{{item.goodscolor}}</span>
                </div>
                <span class="price">{{item.goodsprice}}</span>
                <span class="num">{{sel_num}}</span>
                <span class="totalprice">￥{{totalprice}}</span>
              </div>
            </li>
          </ul>
        </div>
        <!-- 确认收货信息 -->
        <div class="confirm">
          <!-- 确认收货标题框 -->
          <div class="con_top">
            <span>确认收货信息</span>
          </div>
          <!-- 收货地址 -->
          <div class="shippingAddress" style="margin-left:10px">
            <!-- 标题 -->
            <div class="shippingAddress-title">
              <p
                style="font-size:18px;font-family:Microsoft YaHei;font-weight:400;color:rgba(102,102,102,1);"
              >收货地址：</p>
            </div>
            <!-- 地址 -->
            <div class="shippingAddress-site">
              <div class="siteInfo">
                <!-- 默认Icon -->
                <span class="default">默认</span>
                <p
                  style="font-size:18px;font-family:Microsoft YaHei;font-weight:400;color:rgba(77,77,77,1);"
                >
                  江苏省南京市雨花台区软件大道112号XXXX小区802栋302室(王狗蛋 收)
                  18213124546
                </p>
              </div>
              <div class="siteInfo" style="margin-top:-10px">
                <p
                  style="  font-size:18px;
                  font-family:Microsoft
                  YaHei;
                  font-weight:400;
                  color:rgba(77,77,77,1);"
                >
                  江苏省南京市雨花台区软件大道112号XXXX小区802栋302室(王狗蛋 收)
                  18213124546
                </p>
              </div>
            </div>
            <!-- 新增收货地址 -->
            <div class="shippingAddress-add" @click="increaseShow = true">
              <p>+新增收货地址</p>
            </div>
          </div>
          <!-- 新增收货地址模态框 -->
          <div class="increaseSite" v-show="increaseShow">
            <!-- 中间修改白色模态框 -->
            <div class="amendBox">
              <!-- 标题 -->
              <div class="amend-title">
                <p>新增收货地址</p>
              </div>
              <!-- 编辑收货信息输入框 -->
              <div class="compile">
                <ul class="inputList">
                  <li>
                    <span>*收货人:</span>
                    <el-input placeholder="请输入收件人姓名" v-model="consignee2" class="psd" clearable></el-input>
                  </li>
                  <li>
                    <span>*手机号:</span>
                    <el-input
                      placeholder="请输入收件人手机号"
                      v-model="myPhone2"
                      class="psd"
                      type="text"
                      clearable
                      oninput="value=value.replace(/[^\d]/g,'')"
                    ></el-input>
                  </li>
                  <li>
                    <span>*所在地区:</span>
                    <div class="region">
                      <el-select placeholder="请选择省份" style="width:120px">
                        <el-option value="南京"></el-option>
                      </el-select>
                      <el-select placeholder="请选择城市" style="width:120px">
                        <el-option value="江宁"></el-option>
                      </el-select>
                      <el-select placeholder="请选择区域" style="width:120px">
                        <el-option value="黑角角"></el-option>
                      </el-select>
                    </div>
                  </li>
                  <li>
                    <span>*详细地址:</span>
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入详细地址"
                      v-model="location2"
                      class="psd"
                      maxlength="200"
                      clearable
                    ></el-input>
                  </li>
                </ul>
              </div>
              <!-- 对地址的操作 -->
              <div class="operation">
                <span style="color:#999999;display:flex;align-items:center">
                  <span class="setIcon">
                    <img src="../../assets/image/7_1_1_duihao1.png" alt />
                  </span>
                  设置为默认地址
                </span>
              </div>
              <!-- 确定取消按键 -->
              <div class="confirmBtn">
                <span
                  style="border-right:1px solid #ccc;display:flex;justify-content:center"
                  @click="increaseShow = false"
                >取消</span>
                <span
                  style="color:#f03a58;display:flex;justify-content:center"
                  @click="successShow5"
                >确定</span>
              </div>
            </div>
          </div>
          <!-- 新增收货地址编辑成功模态框 -->
          <div class="successfullyIncrease" v-show="successfullyIncrease">
            <!-- 修改成功小图标 -->
            <div class="successIcon">
              <img src="../../assets/image/1_1_2_icon_success.png" alt />
            </div>
            <span>新增收货地址成功！</span>
          </div>
          <!-- 发票信息 -->
          <div class="invoice" style="margin-top:40px;margin-left:10px">
            <div style="display:flex;">
              <!-- 标题 -->
              <div class="invoice-title">
                <p>发票信息：</p>
              </div>
              <!-- 信息 -->
              <div class="invoice-info">
                <div class="siteInfo">
                  <!-- 默认Icon -->
                  <span class="default">默认</span>
                  <p
                    style="font-size:18px;font-family:Microsoft YaHei;font-weight:400;color:rgba(77,77,77,1);"
                  >普通发票(个人) 发票抬头：王狗蛋</p>
                </div>
                <span
                  style="font-size:18px;font-family:Microsoft YaHei;font-weight:400;color:rgba(77,77,77,1);"
                >不使用发票</span>
                <!-- 新增发票信息 -->
                <div class="invoice-add" @click="invoiceShow2">
                  <p>+新增发票信息</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 选择优惠卷 -->
          <div class="choose" style="margin-left:10px">
            <span class="title">使用优惠券：</span>
            <div class="right">
              <span class="choose" @click="hui = true">选择优惠券</span>
              <div class="ch_card">
                <div class="kuang">
                  <span>{{youhui}}</span>
                  <span class="ku">￥</span>
                </div>
                <img style="height:96px" src="../../assets/image/4_1_0_line.png" alt />
                <div class="desc">
                  <span>{{quan_name}}</span>
                  <span>{{quan_desc}}</span>
                  <span>{{over_time}}</span>
                </div>
                <img class="sel" src="../../assets/image/4_1_0_select.png" alt />
              </div>
            </div>
          </div>
          <!-- 订单备注 -->
          <div class="order_notes" style="margin-left:10px">
            <span>订单备注：</span>
            <!-- 请输入订单备注信息 -->
            <div class="note_msg">
              <textarea name id cols="30" rows="10" placeholder="请输入订单备注信息..."></textarea>
            </div>
          </div>
        </div>
        <!--确认结算信息 -->
        <div class="order_buy">
          <div class="buy_title">
            <span>确认结算信息</span>
          </div>
          <div class="buy_msg">
            <div class="zong">
              <span>商品总金额：{{all_price}}元</span>
            </div>
            <div class="yunfei">
              <span>运费：{{yunfei}}元</span>
            </div>
            <div class="yingfu">
              <span>
                应付金额：
                <span id="yingfu">{{totalprice}}元（已优惠{{yiyouhui}}元）</span>
              </span>
            </div>
            <div class="jifen">
              <span>此单可获得积分：{{jifen}}积分</span>
            </div>
            <div class="tijiao">
              <span>提交订单</span>
            </div>
          </div>
        </div>
        <!-- 选择优惠券模态框 -->
        <div class="youhui" v-show="hui">
          <div class="center">
            <div class="title">
              <span>选择优惠券</span>
            </div>
            <div class="content">
              <ul>
                <li class="card" v-for="(item,index) in youhuiquan" :key="index">
                  <div class="img">
                    <img src="../../assets/image/3_1_0_select_s.png" alt />
                  </div>
                  <div class="kuang">
                    <div class="left">
                      <span>{{item.youhui}}</span>
                      <span class="ku">￥</span>
                    </div>
                    <img style="height:96px" src="../../assets/image/4_1_0_line.png" alt />
                    <div class="desc">
                      <span>{{item.quan_name}}</span>
                      <span>{{item.quan_desc}}</span>
                      <span>{{item.over_time}}</span>
                    </div>
                    <img class="sel" src="../../assets/image/4_1_0_select.png" alt />
                  </div>
                </li>
              </ul>
              <div class="confirmBtn">
                <span
                  style="border-right:1px solid #ccc;display:flex;justify-content:center;align-items:center;"
                  @click="hui = false"
                >取消</span>
                <span
                  style="color:#f03a58;display:flex;justify-content:center;align-items:center;"
                  @click="successShow6"
                >确定</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <foot></foot>
    <right></right>

    <router-view></router-view>
  </div>
</template>

<script>
import navigationBar from "../../components/navigationBar";
import right from "../../components/common/right_logo";
import foot from "../../components/footer";
export default {
  components: {
    navigationBar,
    right,
    foot
  },
  data() {
    return {
      shopcarlist: [
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A",
          goodscolor: "黄色"
        },
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A",
          goodscolor: "黄色"
        },
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A",
          goodscolor: "黄色"
        },
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A",
          goodscolor: "黄色"
        },
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A",
          goodscolor: "黄色"
        },
        {
          imgUrl: "",
          goodsname:
            "MSA梅思安 标准型安全帽,黄色PE帽壳,一指键帽衬,PVC吸汗带,D型下颏带",
          goodsprice: "￥99.0/包",
          goodsmodel: "UT395A",
          goodscolor: "黄色"
        }
      ],
      youhuiquan: [
        {
          youhui: 20, //平台优惠卷额度
          quan_name: "平台满减券10元", //什么类型优惠券
          quan_desc: "满300可用",
          over_time: "2019-06-30至2019-08-30"
        },
        {
          youhui: 20, //平台优惠卷额度
          quan_name: "平台满减券10元", //什么类型优惠券
          quan_desc: "满300可用",
          over_time: "2019-06-30至2019-08-30"
        },
        {
          youhui: 20, //平台优惠卷额度
          quan_name: "平台满减券10元", //什么类型优惠券
          quan_desc: "满300可用",
          over_time: "2019-06-30至2019-08-30"
        }
      ], //选择优惠券弹窗里的优惠券选项卡片
      hui: false, //选择优惠券时点击的flag
      yunfei: 100, //运费
      totalprice: "180.0",
      sel_num: 4,
      jifen: 1220, //可获积分
      yiyouhui: 30, //已优惠
      all_price: "720.0",
      location: "", //详细地址
      myPhone: "", //收件人手机号
      harvestShow: false, //编辑收货地址模态框显示
      successfullyHarvest: false, //收货地址编辑成功模态框
      consignee2: "", //新增收货人
      myPhone2: "", //新增收货人手机号
      location2: "", //新增详情地址
      increaseShow: false, //新增收货地址模态框显示
      successfullyIncrease: false, //新增收货地址编辑成功模态框
      youhui: 20, //平台优惠卷额度
      quan_name: "平台满减券10元", //什么类型优惠券
      quan_desc: "满300可用",
      over_time: "2019-06-30至2019-08-30"
    };
  },
  methods: {
    // 点击新增收货地址模态框中的确定按钮，修改成功显示
    successShow5() {
      this.successfullyIncrease = true;
      this.increaseShow = false;
      setTimeout(() => {
        this.successfullyIncrease = false;
      }, 2000);
    },
    // 点击确定按钮关闭选择优惠券模态框
    successShow6() {
      this.hui = false;
    },
    //点击新增发票
    invoiceShow2() {
      this.$router.push({ path: "order/add_invoice" });
    },
  
  }
};
</script>

<style lang="scss" scoped>
// 显示信息的白色内容盒
@mixin infoBox {
  background: white;
  margin-top: 20px;
  padding: 10px 15px;
}
// 显示信息的白色内容盒标题
@mixin infoTitle {
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  height: 38px;
  line-height: 38px;
  font-size: 16px;
}
// 收货地址和发票信息的选项
@mixin optionMsg {
  font-size: 13px;
  text-align: start;
  .siteInfo {
    margin-top: 12px;
    display: flex;
    //  默认地址图标
    .default {
      width: 40px;
      height: 22px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(254, 44, 74, 1);
      border-radius: 10px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(254, 44, 74, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 6px;
    }
  }
}
//新增信息按钮
@mixin addInfo {
  width: 130px;
  height: 34px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(254, 44, 74, 1);
  border-radius: 10px;
}
// 有关修改的模态框
@mixin updateInfo {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}
// 中间修改白色模态框
@mixin centerBox {
  width: 465px;
  height: 277px;
  padding: 10px 10px 0 10px;
  background: #fff;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
// 中间修改白色模态框（扩大）
@mixin centerBox2 {
  width: 465px;
  height: 370px;
  padding: 10px 10px 0 10px;
  background: #fff;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
// 输入框内容盒
@mixin inputInfo {
  margin: 15px 0;
  .inputList {
    li {
      height: 40px;
      list-style: none;
      display: flex;
      font-size: 12px;
      text-align: start;
      line-height: 40px;
      margin-bottom: 15px;
      margin-left: -18px;
      span {
        // flex: 1;
        display: block;
        margin-left: -20px;
        width: 100px;
      }
      .psd {
        flex: 4;
      }
    }
  }
}
//确定、取消按键内容盒
@mixin confirmBtn {
  height: 45px;
  margin-top: 25px;
  border-top: 1px solid #ccc;
  display: flex;
  span {
    flex: 1;
    line-height: 45px;
    cursor: pointer;
  }
}
// 选择优惠券模态框
@mixin youhuikuang {
  width: 700px;
  height: 500px;

  background: #fff;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
// 收货地址
.shippingAddress {
  //   @include infoBox;
  display: flex;

  // 标题
  .shippingAddress-title {
    // @include infoTitle;
    margin-left: 12px;
    margin-top: 6px;
  }
  // 地址
  .shippingAddress-site {
    @include optionMsg();
    margin-left: 20px;
    margin-top: -4px;
    .siteInfo {
      display: flex;
      align-items: center;
    }
  }
  // 新增收货地址
  .shippingAddress-add {
    @include addInfo();
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 120px;
    left: -736px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(254, 44, 74, 1);
  }
}
// 发票信息
.invoice {
  @include infoBox;
  // 标题
  // display: flex;
  // align-items: center;
  .invoice-title {
    // @include infoTitle();
    // display: flex;
    // align-items: center;
  }
  // 信息
  .invoice-info {
    @include optionMsg();
    margin-left: 20px;
    margin-top: -10px;
    .siteInfo {
      display: flex;
      align-items: center;
    }
  }
  // 新增收货地址
  .invoice-add {
    @include addInfo();
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(254, 44, 74, 1);
  }
}
// 修改密码成功模态框
.successfullyPsd,
.successfullyPhone,
.successfullyMessage,
.successfullyHarvest,
.successfullyChoose .successfullyIncrease {
  width: 180px;
  height: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 10px;
  color: #fff;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  // 修改成功小图标
  .successIcon {
    width: 30px;
    height: 30px;
    margin: 15px auto;
  }
}
// 修改手机号码模态框
.update_phone {
  @include updateInfo();
  // 中间白色修改框
  .amendBox {
    @include centerBox();
    // 标题
    .amend-title {
      @include infoTitle();
      display: flex;
      align-items: center;
    }
    // 手机号码输入框
    .phoneInput {
      @include inputInfo();
    }
    //  确定取消按键
    .confirmBtn {
      @include confirmBtn();
      margin-top: 82px;
    }
  }
}
// 编辑信息模态框
.update_message {
  @include updateInfo();
  //    中间白色修改框
  .amendBox {
    @include centerBox2();
    // 标题
    .amend-title {
      display: flex;
      align-items: center;
      @include infoTitle();
    }
    // 个人信息输入框
    .messageInput {
      @include inputInfo();
    }
    // 确定取消按键
    .confirmBtn {
      @include confirmBtn();
      margin-top: 65px;
    }
  }
}
// 编辑收货地址模态框
.receiverAddress {
  @include updateInfo();
  //中间白色修改框
  .amendBox {
    @include centerBox2();
    //   标题
    .amend-title {
      display: flex;
      align-items: center;
      @include infoTitle();
    }
    // 收货地址输入框
    .addresseeInput {
      @include inputInfo();
      //   选择地区多选框
      .region {
        width: 372px;
        display: flex;
        justify-content: space-between;
      }
    }
    // 对地址的操作
    .operation {
      width: 190px;
      height: 14px;
      font-size: 12px;
      position: absolute;
      bottom: 55px;
      right: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span:hover {
        cursor: pointer;
      }
      .setIcon {
        display: flex;
        width: 12px;
        height: 12px;
        margin-right: 4px;
      }
    }
    // 确定取消按键
    .confirmBtn {
      @include confirmBtn();
      margin-top: 65px;
    }
  }
}

// 新增收货地址模态框
.increaseSite {
  @include updateInfo();
  // 中间修改白色模态框
  .amendBox {
    @include centerBox2();

    // 标题
    .amend-title {
      display: flex;
      align-items: center;
      @include infoTitle();
    }
    // 编辑收货信息输入框
    .compile {
      @include inputInfo();
      //   选择地区多选框
      .region {
        width: 372px;
        display: flex;
        justify-content: space-between;
      }
    }
    // 对地址的操作
    .operation {
      width: 100px;
      height: 14px;
      font-size: 12px;
      position: absolute;
      bottom: 55px;
      right: 14px;
      line-height: 14px;
      span:hover {
        cursor: pointer;
      }
      .setIcon {
        display: flex;
        width: 12px;
        height: 12px;
        margin-right: 4px;
      }
    }
    // 确定取消按键
    .confirmBtn {
      @include confirmBtn();
      margin-top: 65px;
    }
  }
}
// 选择优惠券模态框
.youhui {
  @include updateInfo();

  // 选择优惠券中间的白色部分的白色盒子
  .center {
    @include youhuikuang();
    .title {
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(230, 230, 230, 1);
      height: 40px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      margin-top: 6px;
      span {
        margin-left: 20px;
      }
    }
    .content {
      ul {
        padding: 12px 0;
        margin: 0;
        list-style: none;
        height: 360px;
        overflow: auto;
        overflow-x: hidden;
        padding: 10px 0;

        .card {
          display: flex;
          align-items: center;
          .img {
            margin-left: 84px;
          }
          .kuang {
            width: 400px;
            height: 120px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 1px 6px 0px rgba(88, 37, 44, 0.2);
            margin-top: 8px;
            margin-left: 18px;
            display: flex;
            align-items: center;
            position: relative;
            .left {
              width: 120px;
              height: 120px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 60px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(254, 44, 74, 1);
              position: relative;

              .ku {
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: rgba(254, 44, 74, 1);
                position: absolute;
                top: 32px;
                right: 12px;
              }
            }
            .sel {
              position: absolute;
              top: 0px;
              right: 0px;
            }
            .desc {
              height: 100%;
              flex: 1;
              padding-left: 20px;
              box-sizing: border-box;

              span {
                display: flex;
              }
              & span:nth-of-type(1) {
                font-size: 22px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                margin-top: 18px;
              }
              & span:nth-of-type(2) {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(128, 128, 128, 1);
                margin-top: 10px;
              }
              & span:nth-of-type(3) {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(128, 128, 128, 1);
                margin-top: 6px;
              }
            }
          }
        }
      }
      .confirmBtn {
        @include confirmBtn();
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.container {
  width: 100%;
  min-height: 600px;
  background-color: rgb(238, 232, 232);
  .section {
    margin: 0 auto;
    width: 1200px;
    min-height: 560px;
    // border: 1px solid red;
    .crumb {
      height: 40px;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
    }
    // 确认商品信息
    .selected {
      width: 100%;
      margin-bottom: 20px;
      background-color: white;
      .sel_top {
        height: 46px;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        display: flex;
        align-items: center;
        padding: 0 20px;
        span {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(61, 61, 61, 1);
        }
        & span:nth-of-type(1) {
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(77, 77, 77, 1);
        }
      }
      ul {
        list-style: none;
        margin: 0;
        padding: 0 10px;
        box-sizing: border-box;
        li {
          display: flex;
          padding: 12px 0;
          border-bottom: 1px solid rgba(219, 219, 219, 1);
          align-items: center;
          .goodsshow {
            display: flex;
            align-items: center;
            .img {
              width: 140px;
              height: 120px;
              background: rgba(255, 255, 255, 1);
              border: 1px solid rgba(219, 219, 219, 1);
              padding: 0 10px;
              box-sizing: border-box;
              margin-left: 8px;
              img {
                display: block;

                width: 119px;
                height: 119px;
                border: 1px solid black;
              }
            }
            .goodsdesc {
              width: 280px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-left: 20px;
              p {
                display: block;
                margin-top: -2px;
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(61, 61, 61, 1);
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
              span {
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(127, 127, 127, 1);
              }
            }
            .price {
              font-size: 20px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: rgba(224, 32, 63, 1);
              margin-left: 70px;
            }
            .num {
              margin-left: 210px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: rgba(102, 102, 102, 1);
            }
            .totalprice {
              margin-left: 210px;
              font-size: 20px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: rgba(224, 32, 63, 1);
            }
            .del {
              margin-left: 86px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 300;
              color: rgba(92, 92, 92, 1);
              cursor: pointer;
            }
          }
        }
      }
    }
    // 确认收货信息
    .confirm {
      background-color: #fff;
      width: 100%;
      min-height: 400px;
      padding-bottom: 20px;
      .con_top {
        height: 46px;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        display: flex;
        align-items: center;
        padding: 0 20px;
        & span:nth-of-type(1) {
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(77, 77, 77, 1);
        }
      }
      // 选择优惠券
      .choose {
        margin-top: 10px;
        width: 100%;
        height: 200px;
        display: flex;
        padding: 0 12px;
        box-sizing: border-box;
        .title {
          display: block;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
        }
        .right {
          margin-top: -10px;
          flex: 1;
          .choose {
            cursor: pointer;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
          }
          .ch_card {
            margin-top: -160px;
            margin-left: 14px;
            width: 400px;
            height: 120px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 1px 6px 0px rgba(88, 37, 44, 0.2);
            position: relative;
            display: flex;
            align-items: center;

            .kuang {
              width: 120px;
              height: 120px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 60px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(254, 44, 74, 1);
              position: relative;
              .ku {
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: rgba(254, 44, 74, 1);
                position: absolute;
                top: 32px;
                right: 12px;
              }
            }
            .sel {
              position: absolute;
              top: 0px;
              right: 0px;
            }
            .desc {
              height: 100%;
              flex: 1;
              padding-left: 20px;
              box-sizing: border-box;
              span {
                display: flex;
              }
              & span:nth-of-type(1) {
                font-size: 22px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                margin-top: 18px;
              }
              & span:nth-of-type(2) {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(128, 128, 128, 1);
                margin-top: 10px;
              }
              & span:nth-of-type(3) {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(128, 128, 128, 1);
                margin-top: 6px;
              }
            }
          }
        }
      }
      .order_notes {
        // 添加订单备注
        // border-bottom: 20px solid rgb(238, 232, 232);
        display: flex;
        span {
          margin-left: 12px;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          margin-right: 24px;
        }
        .note_msg {
          textarea {
            outline: none;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 300;
            color: rgba(127, 127, 127, 1);
            width: 880px;
            height: 160px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(219, 219, 219, 1);
          }
        }
      }
    }
    // 确认结算信息
    .order_buy {
      background-color: #fff;
      width: 100%;
      min-height: 380px;
      margin-top: 20px;
      // margin-bottom: 40px;
      border-bottom: 30px solid rgb(238, 232, 232);
      .buy_title {
        height: 46px;
        border: 1px solid rgba(230, 230, 230, 1);
        display: flex;
        align-items: center;
        span {
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(77, 77, 77, 1);
          margin-left: 20px;
        }
      }
      .buy_msg {
        padding: 30px 20px;
        box-sizing: border-box;
        .zong {
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          margin-bottom: 12px;
        }
        .yunfei {
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          margin-bottom: 24px;
        }
        .yingfu {
          span {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            #yingfu {
              font-size: 26px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(254, 44, 74, 1);
            }
          }
        }
        .jifen {
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          margin-bottom: 12px;
          margin-top: 12px;
        }
        .tijiao {
          cursor: pointer;
          width: 360px;
          height: 50px;
          background: rgba(240, 58, 88, 1);
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 40px;
          span {
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }
}
// 以下为是对从外部引入的添加发票 添加地址 样式的本页面修改
.invoice-title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}
.default {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(254, 44, 74, 1);
}
</style>